import React, { useState, useEffect } from 'react';
import { Form, Button, Space, notification } from 'antd';
import { goBack, componentsMap } from '@/utils/util';
import UploadList from '@/components/UploadList';
import FileList from '@/components/FileLists';
import { useModel } from 'umi';
import moment from 'moment';
import API from '@/api/xjindex.js';

//新增0 查看1 编辑2
const propertyCreate = ({ state, id }) => {
  const [form] = Form.useForm();
  const [WLLX, setWLLX] = useState([]);
  const [YWLX, setYWLX] = useState([]);
  const { initialState } = useModel('@@initialState');
  const [fileList, setFileList] = useState([]);
  const [orgList, setOrgList] = useState([]);
  const { username } = initialState.info;
  if (state === 0) {
    form.setFieldsValue({
      createName: username,
      createTime: moment(),
    });
  }

  const baseInfo = [
    {
      label: '系统名称',
      name: 'systemName',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入资产名称',
        },
      ],
    },
    {
      label: '业务类型',
      name: 'businessType',
      type: 'select',
      otherProps: {
        options: YWLX,
      },
      rules: [
        {
          required: true,
          message: '请选择业务类型',
        },
      ],
    },
    {
      label: '网络类型',
      name: 'networkType',
      type: 'select',
      otherProps: {
        options: WLLX,
      },
      rules: [
        {
          required: true,
          message: '请输入网络类型',
        },
      ],
    },
    {
      label: '所属单位',
      name: 'affiliatedUnit',
      type: 'select',
      rules: [
        {
          required: true,
          message: '请选择所属单位名',
        },
      ],
      otherProps: {
        options: orgList,
      },
    },
    {
      label: '访问地址',
      name: 'accessAddress',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入访问地址',
        },
      ],
    },
    {
      label: '系统IP',
      name: 'systemIp',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入系统ip',
        },
        {
          pattern: /^((\d|[1-9]\d|1\d\d|2[0-4]\d25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
          message: 'IP格式不正确',
        },
      ],
    },
    {
      label: '功能描述',
      name: 'functionDesc',
      type: 'textarea',
      rules: [
        {
          required: true,
          message: '请输入功能描述',
        },
      ],
      isremark: true,
    },
    {
      label: '创建人',
      name: 'createName',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '创建时间',
      name: 'createTime',
      type: 'datepicker',
      otherProps: {
        disabled: true,
      },
    },
  ];
  const DengBaoInfo = [
    {
      label: '是否等保定级备案',
      name: 'sfdbdjba',
      type: 'select',
      otherProps: {
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
      },
      rules: [
        {
          required: true,
          message: '请选择等保定级备案',
        },
      ],
    },
    {
      label: '等保测评等级',
      name: 'dbcpdj',
      type: 'select',
      otherProps: {
        options: [
          {
            label: '1级',
            value: 1,
          },
          {
            label: '2级',
            value: 2,
          },
          {
            label: '3级',
            value: 3,
          },
        ],
      },
      rules: [
        {
          required: true,
          message: '请选择等保测评等级',
        },
      ],
    },
    {
      label: '等保备案号',
      name: 'dbbah',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入等保备案号',
        },
      ],
    },
    {
      label: '最近一次等保日期',
      name: 'zjycdbsj',
      type: 'datepicker',
      rules: [
        {
          required: true,
          message: '请选择该资产最近一次等保日期',
        },
      ],
    },
  ];
  const MiPingInfo = [
    {
      label: '是否密评',
      name: 'sfmp',
      type: 'select',
      otherProps: {
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
      },
      rules: [
        {
          required: true,
          message: '请选择是否密评',
        },
      ],
    },
    {
      label: '密评备案号',
      name: 'mpbah',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入密评备案号',
        },
      ],
    },
  ];
  const YunWeiInfo = [
    {
      label: '运维单位',
      name: 'maintenanceUnit',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入运维单位',
        },
      ],
    },
    {
      label: '联系人',
      name: 'contacts',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入联系人',
        },
      ],
    },
    {
      label: '联系方式',
      name: 'contactInformation',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入联系方式',
        },
        {
          pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
          message: '手机号格式不正确',
        },
      ],
    },
  ];

  const submitFn = (values) => {
    if (values.zjycdbsj) {
      values.zjycdbsj = values.zjycdbsj.format('YYYY-MM-DD');
    }
    values.assetFileList = values.file;
    if (id) {
      API.updateInfo({ ...id, ...values }).then((res) => {
        if (res) {
          notification.success({ message: '修改成功' });
          goBack();
        }
      });
    } else {
      API.addAsInfo(values).then((res) => {
        if (res) {
          notification.success({
            message: '新增成功',
          });
          goBack();
        }
      });
    }
  };
  function initList() {
    API.getOrgList()
      .then((res) => {
        if (res) {
          setOrgList(
            res.t.map((item) => {
              return {
                label: item.name,
                value: item.id,
              };
            }),
          );
        }
      })
      .then(() => {
        API.getXXZCWLLX().then((res) => {
          if (res) {
            const result = res.t.map((item) => {
              return {
                label: item.dictItemName,
                value: item.dictItemType,
              };
            });
            setWLLX(result);
          }
        });
      })
      .then(() => {
        API.getXXZCYWLX().then((res) => {
          if (res) {
            const result = res.t.map((item) => {
              return {
                label: item.dictItemName,
                value: item.dictItemType,
              };
            });
            setYWLX(result);
          }
        });
      })
      .then(() => {
        if (id) {
          API.showAssetInfo(id).then((res) => {
            if (res) {
              form.setFieldsValue({
                ...res.t,
                createTime: moment(res.t.createTime, 'YYYY-MM-DD'),
                zjycdbsj: moment(res.t.zjycdbsj, 'YYYY-MM-DD'),
              });
              setFileList(res.t.assetFileList);
            }
          });
        }
      });
  }
  useEffect(() => {
    initList();
  }, []);

  const uploadOptions = {
    fileTypes: [
      'application/doc',
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'image/jpg',
      'image/jpeg',
      'image/png',
    ],
    maxSize: 50,
    maxNum: 3,
    accept: [
      '.doc,.docx.,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.jpg,.jpeg,.png',
    ],
    acceptMessage: 'jpg/word/pdf',
  };

  return (
    <div className="main-x readOnly-x">
      <Form form={form} onFinish={submitFn}>
        <div className="base-title">基本信息</div>
        <div className="bgf">
          <div className="ant-form-inline form-x max-x">
            {baseInfo.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.label}
                  name={item.name}
                  className={item.isremark ? 'block' : ''}
                  rules={item.rules}
                >
                  {componentsMap(item.type, item.otherProps, state === 1)}
                </Form.Item>
              );
            })}
          </div>
        </div>
        <div className="base-title mt20">等保测评信息</div>
        <div className="bgf">
          <div className="ant-form-inline form-x max-x">
            {DengBaoInfo.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.label}
                  name={item.name}
                  className={item.isremark ? 'block' : ''}
                  rules={item.rules}
                >
                  {componentsMap(item.type, item.otherProps, state === 1)}
                </Form.Item>
              );
            })}
          </div>
        </div>
        <div className="base-title mt20">密评信息</div>
        <div className="bgf">
          <div className="ant-form-inline form-x max-x">
            {MiPingInfo.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.label}
                  name={item.name}
                  className={item.isremark ? 'block' : ''}
                  rules={item.rules}
                >
                  {componentsMap(item.type, item.otherProps, state === 1)}
                </Form.Item>
              );
            })}
          </div>
        </div>
        <div className="base-title mt20">运维信息</div>
        <div className="bgf">
          <div className="ant-form-inline form-x max-x">
            {YunWeiInfo.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.label}
                  name={item.name}
                  className={item.isremark ? 'block' : ''}
                  rules={item.rules}
                >
                  {componentsMap(item.type, item.otherProps, state === 1)}
                </Form.Item>
              );
            })}
          </div>
        </div>
        <div className="base-title mt20">附件信息</div>
        <div className="form-x bgf" style={{ paddingBottom: '16px' }}>
          {state === 1 ? (
            <Form.Item label="附件信息" className="block">
              {
                <FileList
                  fileList={fileList}
                  downloadUrl="/assetInfo/download"
                />
              }
            </Form.Item>
          ) : (
            <Form.Item
              label="附件信息"
              extra="支持jpg/word/pdf格式,单个大小在50M以内,支持多个上传，最多上传3个附件"
              name="file"
              className="block"
            >
              <UploadList
                uploadUrl="/assetInfo/fileupload"
                downloadUrl="/assetInfo/download"
                options={uploadOptions}
                defaultFiles={fileList}
              ></UploadList>
            </Form.Item>
          )}
        </div>
        <div className="footer-x">
          <Space size={18}>
            {state === 1 ? null : (
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            )}
            <Button type="primary" className="cancel-btn" onClick={goBack}>
              返回
            </Button>
          </Space>
        </div>
      </Form>
    </div>
  );
};
export default propertyCreate;
